<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <link rel="stylesheet" href="../../../lib/bootstrap@3.3.4/css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        #wrap {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .out {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .time {
            position: absolute;
            left: 20px;
            bottom: 50px;
            color: white;
            font-weight: 400;
        }

        .outer {
            position: absolute;
            bottom: 20px;
            left: 2%;
            width: 96%;
            height: 5px;
            border-radius: 1px;
            background-color: #fff;
        }

        .inner {
            width: 0px;
            height: 100%;
            background-color: greenyellow;
            border-radius: 1px;
        }

        .playPause {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            font-size: 20px;
        }

        .playPause span {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .playPause {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <section id="wrap">
        <div class="out">
            <video src="../../timtle/5/video/汪峰 - 怒放的生命.mkv" id="myVideo"></video>
            <!-- 当前时间、视频总时长 -->
            <div class="time">
                <span class="currentTime"></span>
                <span>/</span>
                <span class="durationTime"></span>
            </div>
            <!-- 进度条 -->
            <div class="outer">
                <div class="inner"></div>
            </div>
        </div>
        <!-- 播放暂停 -->
        <div class="playPause">
            <span class="glyphicon glyphicon-play"></span>
        </div>

    </section>
    <script>
        window.onload = function () {
            //播放暂停
            var myVideo = document.getElementById('myVideo');
            var playPause = document.querySelector('.playPause');
            playPause.onclick = function () {
                if (myVideo.paused) {
                    myVideo.play();
                    myVideo.volume = 0.2;
                    playPause.children[0].className = 'glyphicon glyphicon-pause';
                } else {
                    myVideo.pause();
                    playPause.children[0].className = 'glyphicon glyphicon-play';
                }
            }
            //当前时间、视频总时长
            var currentTime = document.querySelector('.currentTime');
            var durationTime = document.querySelector('.durationTime');
            console.log(durationTime);
            // myVideo.onloadeddata = function(){}
            durationTime.innerHTML = timeFormat(myVideo.duration);

            myVideo.ontimeupdate = function () {
                currentTime.innerHTML = timeFormat(myVideo.currentTime);

                //进度条
                var inner = document.querySelector('.inner');
                var bfb = myVideo.currentTime / myVideo.duration * 100 + '%';
                inner.style.width = bfb;

            }
            //进度条的拖动
            var outer = document.querySelector('.outer');
            outer.onmousedown = function (e) {
                var x = e.pageX - outer.getBoundingClientRect().left;
                var outerWidth = outer.offsetWidth;
                myVideo.currentTime = x / outerWidth * myVideo.duration;
                this.move = true;
            }
            outer.onmousemove = function (e) {
                if (this.move) {
                    var x = e.pageX - outer.getBoundingClientRect().left;
                    var outerWidth = outer.offsetWidth;
                    var inner = document.querySelector('.inner');
                    inner.style.width = x + 'px';
                    myVideo.currentTime = x / outerWidth * myVideo.duration;

                }
            }
            outer.onmouseup = function () {
                this.move = false;
            }

            //将秒转换为时分秒
            function timeFormat(time) {
                var second = parseInt(time);
                var minute = 0;
                var hour = 0;
                if (second >= 60) {
                    minute = parseInt(second / 60);
                    second = parseInt(second % 60);
                    if (minute >= 60) {
                        hour = parseInt(minute / 60);
                        minute = parseInt(minute % 60);
                    }
                }
                if (second < 10) second = '0' + second;
                if (minute < 10) minute = '0' + minute;
                var result = minute + ':' + second;
                if (hour > 0) result = hour + ':' + result;
                return result;
            }



        }
    </script>

</body>

</html>